<template>
  <div class="content_wrap">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="项目列表" name="PROJECT">
        <project-table v-if="activeName === 'PROJECT'" />
      </el-tab-pane>
      <el-tab-pane label="合同列表" name="CONTRACT">
        <contract-table v-if="activeName === 'CONTRACT'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";
import ContractTable from "./ContractTable.vue";
import ProjectTable from "./ProjectTable.vue";
import { useProjectStoreHook } from "/@/store/modules/project";

export default defineComponent({
  components: {
    ContractTable,
    ProjectTable
  },
  setup() {
    const projectHook = useProjectStoreHook();
    // 初始状态
    let activeName = ref<string>("PROJECT");

    // 切换状态
    const handleClick = tab => {
      activeName.value = tab.paneName;
      projectHook.rightSetting();
    };

    return {
      activeName,
      handleClick
    };
  }
});
</script>

<style lang="scss" scoped>
.content_wrap {
  width: 100%;
  overflow-y: hidden;
}
</style>
